<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8"  %>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>北京文旅觉醒</title>
    <!-- 引入Bootstrap的CSS和JavaScript库 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <!-- 自定义样式 -->
    <style>
        body {
            padding-top: 50px;
        }

        .content-section {
            padding: 50px 0;
        }

        .carousel-item img {
            max-height: 400px;
            object-fit: cover;
        }

        .carousel-caption {
            background: rgba(0, 0, 0, 0.5);
            padding: 10px 20px;
            border-radius: 5px;
        }

        .thumbnail {
            max-width: 100%;
            height: auto;
            transition: transform 0.5s ease;
            cursor: pointer;
        }

        .thumbnail:hover {
            transform: scale(1.1);
        }

        .card-body {
            min-height: 150px; /* 设置最小高度以保持卡片高度一致 */
        }
    </style>
</head>
<body>

<!-- 主要内容区域 -->
<div class="container">
    <div class="row">
        <!-- 轮播图展示北京的景点 -->
        <div class="col-md-12 mb-4">
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators" id="carouselIndicators"></ol>
                <div class="carousel-inner" id="carouselInner"></div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

        <!-- 北京景点及相关事项 -->
        <div class="col-md-12">
            <div class="content-section">
                <h2 class="mb-4">北京景点及相关事项</h2>
                <div class="row" id="placeList">
                    <!-- JavaScript将动态生成内容 -->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 模态框用于显示景点详情 -->
<div class="modal fade" id="placeModal" tabindex="-1" role="dialog" aria-labelledby="placeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="placeModalLabel">景点详情</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="placeModalBody">
                <!-- 模态框内容将通过JavaScript动态生成 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript部分，动态加载轮播图和景点数据 -->
<script>
    $(document).ready(function() {
        // 获取景点数据
        $.get('http://localhost:8080/place?operation=getAllPlaces', function(response) {
            if (response.code === 200) {
                const places = response.data;

                // 生成景点列表和模态框内容
                const placeList = $('#placeList');
                const placeModalBody = $('#placeModalBody');

                $.each(places, function(index, place) {
                    const column = $('<div></div>').addClass('col-lg-4 col-md-6 mb-4');
                    const card = $('<div></div>').addClass('card h-100');
                    const image = $('<img>').attr({
                        src: place.imageUrl,
                        alt: place.name
                    }).addClass('card-img-top thumbnail').css('cursor', 'pointer');

                    // 点击图片弹出模态框显示详情
                    image.click(function() {
                        const modalTitle = $('<h5></h5>').addClass('modal-title').text(place.name);
                        const detailsList = $('<ul></ul>').addClass('list-group');

                        const locationItem = $('<li></li>').addClass('list-group-item').text(`位置：${place.location}`);
                        const ticketsItem = $('<li></li>').addClass('list-group-item').text(`门票：${place.tickets}`);
                        const hoursItem = $('<li></li>').addClass('list-group-item').text(`开放时间：${place.openHours}`);

                        // 清空模态框内容
                        placeModalBody.empty();

                        // 添加标题和详情列表到模态框
                        placeModalBody.append(modalTitle).append(detailsList.append(locationItem, ticketsItem, hoursItem));

                        // 使用jQuery方法显示模态框
                        $('#placeModal').modal('show');
                    });

                    const cardBody = $('<div></div>').addClass('card-body');
                    const title = $('<h4></h4>').addClass('card-title').text(place.name);
                    const text = $('<p></p>').addClass('card-text').text(place.description);

                    cardBody.append(title).append(text);
                    card.append(image).append(cardBody);
                    column.append(card);
                    placeList.append(column);
                });
            } else {
                console.error('Failed to fetch places data:', response.msg);
            }
        }).fail(function(error) {
            console.error('Error fetching places data:', error);
        });

        // 获取轮播图数据
        $.get('http://localhost:8080/carousel?operation=getAllCarousels', function(data) {
            const carouselIndicators = $('#carouselIndicators');
            const carouselInner = $('#carouselInner');

            $.each(data.data, function(index, carousel) {
                // 创建指示器
                const indicator = $('<li></li>').attr({
                    'data-target': '#carouselExampleIndicators',
                    'data-slide-to': index
                });
                if (index === 0) {
                    indicator.addClass('active');
                }
                carouselIndicators.append(indicator);

                // 创建轮播图项
                const item = $('<div></div>').addClass('carousel-item');
                if (index === 0) {
                    item.addClass('active');
                }

                const img = $('<img>').attr({
                    src: carousel.imageUrl,
                    alt: carousel.title
                }).addClass('d-block w-100');

                const caption = $('<div></div>').addClass('carousel-caption d-none d-md-block');
                const title = $('<h5></h5>').text(carousel.title);
                const description = $('<p></p>').text(carousel.description);

                caption.append(title).append(description);
                item.append(img).append(caption);

                carouselInner.append(item);
            });
        }).fail(function(error) {
            console.error('Error fetching carousel data:', error);
        });
    });
</script>

</body>
</html>
